<template>
  <div class="xuanjiao-container">
    <!-- 子页面导航菜单 -->
    <el-menu
        mode="horizontal"
        :default-active="activeChildIndex"
        @select="handleChildSelect"
        style="margin-bottom: 20px;"
    >
      <el-menu-item index="carousel">轮播图</el-menu-item>
      <el-menu-item index="hot-articles">热门文章</el-menu-item>
    </el-menu>

    <!-- 动态显示子组件 -->
    <component :is="currentChildComponent"></component>
  </div>
</template>

<script>
// 导入子组件（轮播图和热门文章）
import XuanjiaoCarousel from './XuanjiaoCarousel.vue';
import XuanjiaoHotArticles from './XuanjiaoHotArticles.vue';

export default {
  name: 'Xuanjiaoxinxi',
  components: {
    // 注册子组件
    XuanjiaoCarousel,
    XuanjiaoHotArticles
  },
  data() {
    return {
      activeChildIndex: 'carousel', // 默认选中“轮播图”
      currentChildComponent: 'XuanjiaoCarousel' // 默认显示轮播图组件
    };
  },
  methods: {
    // 处理子菜单切换
    handleChildSelect(index) {
      this.activeChildIndex = index;
      switch(index) {
        case 'carousel':
          this.currentChildComponent = 'XuanjiaoCarousel';
          break;
        case 'hot-articles':
          this.currentChildComponent = 'XuanjiaoHotArticles';
          break;
      }
    }
  }
};
</script>

<style scoped>
.xuanjiao-container {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
}
/* 横向菜单样式调整 */
::v-deep .el-menu--horizontal {
  border-bottom: none;
}
::v-deep .el-menu-item.is-active {
  color: #42b983;
  border-bottom: 2px solid #42b983;
}
</style>